<template>
  <div class="results-container">
    <el-card v-if="survey" class="results-card">
      <h2 class="survey-title">{{ survey.title }} - 结果分析</h2>
      <p class="submission-count">共收到 {{ survey.submissions.length }} 份提交</p>
      <el-divider />

      <ChartPreview :survey="survey" />

      <div class="text-responses" v-if="hasTextResponses">
        <h3 class="text-responses-title">文本回答</h3>
        <el-collapse v-model="activeNames">
          <el-collapse-item
              v-for="(question, qIndex) in textQuestions"
              :key="qIndex"
              :title="`${qIndex + 1}. ${question.title}`"
              :name="question.id"
          >
            <el-table
                :data="getTextResponses(question.id)"
                border
                stripe
                empty-text="暂无回答"
            >
              <el-table-column prop="response" label="回答内容" />
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </div>

      <div class="export-section">
        <el-button
            type="primary"
            icon="el-icon-download"
            @click="exportResults"
        >
          导出结果
        </el-button>
      </div>
    </el-card>

    <el-empty v-else description="问卷不存在" />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import ChartPreview from '@/components/survey/ChartPreview.vue'
import { useSurveyStore } from '@/store/modules/survey.store'
import { ElMessage } from 'element-plus'

const route = useRoute()
const surveyStore = useSurveyStore()
const activeNames = ref<string[]>([])

const survey = computed(() => {
  const surveyId = route.params.id as string
  return surveyStore.surveys.find(s => s.id === surveyId) || null
})

const hasTextResponses = computed(() => {
  return survey.value?.questions.some(q => q.type === 'text') || false
})

const textQuestions = computed(() => {
  return survey.value?.questions.filter(q => q.type === 'text') || []
})

const getTextResponses = (questionId: string) => {
  if (!survey.value) return []

  return survey.value.submissions
      .map(sub => ({ response: sub[questionId] || '' }))
      .filter(item => item.response.trim() !== '')
}

const exportResults = () => {
  ElMessage.success('导出成功（模拟）')
}

onMounted(() => {
  if (!survey.value) {
    const surveyId = route.params.id as string
    const found = surveyStore.surveys.find(s => s.id === surveyId)
    if (found) surveyStore.currentSurvey = found
  }

  // 默认展开所有文本问题
  if (survey.value) {
    activeNames.value = survey.value.questions
        .filter(q => q.type === 'text')
        .map(q => q.id)
  }
})
</script>

<style scoped>
.results-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

.results-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.survey-title {
  text-align: center;
  margin-bottom: 10px;
  color: #303133;
}

.submission-count {
  text-align: center;
  color: #606266;
  margin-bottom: 20px;
}

.text-responses {
  margin-top: 40px;
}

.text-responses-title {
  margin-bottom: 20px;
  color: #303133;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.export-section {
  margin-top: 30px;
  text-align: center;
}
</style>